<style type="text/css">
	body{
		background-color: #AC8E27;
	}
	.popupbtn{
		position: absolute;
		top: 40px;
		left: 50%;
		transform: translate(-50%,-50%);
		width: 100px;
		height: 40px;
		background-color: rgb(0,64,165);
		border-radius: 5px;
		color: rgb(225,225,225);
		line-height: 40px;
		font-size: 16px;
		text-align: center;
		cursor: pointer;
		border:none;
		outline: none;
	}
	.sendbtn{
		width: 100px;
		height: 40px;
		background-color: rgb(0,64,165);
		border-radius: 5px;
		color: rgb(225,225,225);
		line-height: 40px;
		font-size: 16px;
		text-align: center;
		cursor: pointer;
		border:none;
		outline: none;
	}
	.close{
		position: absolute;
		right: 8px;
		top: 0px;
		font-size: 16px;
		user-select: none;
		font-style:normal;
		cursor: pointer;
		color: #fff;
		-webkit-tap-highlight-color:rgba(0,0,0,0);
	}
	.close:hover{
		opacity: .1;
		transform: scale(1.2);
	}
	.btn-ani{
		-webkit-animation-name: anibtn;
		animation-name: anibtn;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		animation-fill-mode:forwards;
	}
	.popup-ani{
		-webkit-animation-name: anipopup;
		animation-name: anipopup;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		animation-fill-mode:forwards;
	}
	.sendbtn-ani{
		-webkit-animation-name: anisendbtn;
		animation-name: anisendbtn;
		-webkit-animation-duration: 1s;
		animation-duration: 1s;
		-webkit-animation-timing-function:ease-in-out;
		animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		animation-fill-mode:forwards;
	}
	.close-ani{
		-webkit-animation-name: aniclose;
		animation-name: aniclose;
		-webkit-animation-duration: 0.6s;
		animation-duration: 0.6s;
		-webkit-animation-timing-function:ease-in-out;
		animation-timing-function:ease-in-out;
		-webkit-animation-fill-mode:forwards;
		animation-fill-mode:forwards;
	}
	@-webkit-keyframes anibtn{
		0%  {-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
		30% {-webkit-transform:translate(-50%,-50%) scale3d(1.25,.75,1);transform:translate(-50%,-50%) scale3d(1.25,.75,1);}
		40% {-webkit-transform:translate(-50%,-50%) scale3d(.75,1.25,1);transform:translate(-50%,-50%) scale3d(.75,1.25,1);}
		50% {-webkit-transform:translate(-50%,-50%) scale3d(1.15,.85,1);transform:translate(-50%,-50%) scale3d(1.15,.85,1)}
		65% {-webkit-transform:translate(-50%,-50%) scale3d(.95,1.05,1);transform:translate(-50%,-50%) scale3d(.95,1.05,1);}
		75% {-webkit-transform:translate(-50%,-50%) scale3d(1.05,.95,1);transform:translate(-50%,-50%) scale3d(1.05,.95,1);}
		100%{-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
	}
	@keyframes anibtn{
		0%  {-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
		30% {-webkit-transform:translate(-50%,-50%) scale3d(1.25,.75,1);transform:translate(-50%,-50%) scale3d(1.25,.75,1);}
		40% {-webkit-transform:translate(-50%,-50%) scale3d(.75,1.25,1);transform:translate(-50%,-50%) scale3d(.75,1.25,1);}
		50% {-webkit-transform:translate(-50%,-50%) scale3d(1.15,.85,1);transform:translate(-50%,-50%) scale3d(1.15,.85,1)}
		65% {-webkit-transform:translate(-50%,-50%) scale3d(.95,1.05,1);transform:translate(-50%,-50%) scale3d(.95,1.05,1);}
		75% {-webkit-transform:translate(-50%,-50%) scale3d(1.05,.95,1);transform:translate(-50%,-50%) scale3d(1.05,.95,1);}
		100%{-webkit-transform:translate(-50%,-50%) scaleX(1);transform:translate(-50%,-50%) scaleX(1);}
	}
	@-webkit-keyframes anipopup{
		0% {bottom: -60vh}
		50% {bottom: -4vh}
		65% {bottom: -4.5vh}
		75% {bottom: -1vh}
		100%{bottom: 0}
	}
	@keyframes anipopup{
		0% {bottom: -60vh}
		50% {bottom: -4vh}
		65% {bottom: -4.5vh}
		75% {bottom: -1vh}
		100%{bottom: 0}
	}
	@-webkit-keyframes aniclose{
		0% {bottom: 0}
		100%{bottom: -60vh}
	}
	@keyframes aniclose{
		0% {bottom: 0}
		100%{bottom: -60vh}
	}
	@keyframes anisendbtn{
		0%  {-webkit-transform:scaleX(1);transform:scaleX(1);}
		30% {-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}
		40% {-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1);}
		50% {-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
		65% {-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}
		75% {-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}
		100%{-webkit-transform:scaleX(1);transform:scaleX(1);}
	}
	@-webkit-keyframes anisendbtn{
		0%  {-webkit-transform:scaleX(1);transform:scaleX(1);}
		30% {-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1);}
		40% {-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1);}
		50% {-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}
		65% {-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1);}
		75% {-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1);}
		100%{-webkit-transform:scaleX(1);transform:scaleX(1);}
	}
</style>



<button class="popupbtn" data-btnani='btn-ani'>open</button>
<div class="popup" data-openani='popup-ani' data-closeani='close-ani' style="position: fixed;left:0;bottom: -60vh;height: 60vh;width: 100%;background-color: #000;opacity: 0.5;border-top-left-radius: 10px;border-top-right-radius: 10px;color: #fff;display: flex;flex-direction: column;justify-content: center;align-items: center;">
	<i class="close">&#10005;</i>
	<textarea class="url-area" style="width: 80%;height: 40px;margin-bottom: 10px;border-radius: 5px;padding: 10px;font-size: 14px;resize:none;" placeholder='输入请求的url地址'></textarea>
	<textarea class="data-area" style="width: 80%;height: 60px;margin-bottom: 10px;font-size: 14px;padding: 10px;resize:none;border-radius: 5px;" 
	placeholder="输入json数据形式{key:value}"></textarea>
	<textarea class="outer-area" style="width: 80%;background-color:#fff;padding: 10px;margin-bottom: 10px;height: 20vh;border-radius: 5px;resize:none;"></textarea>
	<button class="sendbtn" data-btnani='sendbtn-ani'>send</button>
</div>

<script type="text/javascript">
	//阻止弹出框的点击事件冒泡
	$('.popup').click(function(event){
		event.stopPropagation();
	});
	//点击除了弹出框以及触发弹出框弹出的按钮，使弹出框的返回
	$(document).click(function(event){
		var popup=$('.popup'),
		popup_openani=popup.data('openani'),
		popup_closeani=popup.data('closeani')
		target=$(event.target);
		if (target.hasClass('popupbtn')||$(target).hasClass('popup')) {
			return false;
		}
		//如果当前弹出框是出现状态，则点击后触发弹框返回
		if(popup.hasClass(popup_openani)||!popup.hasClass(popup_closeani)){
			popup_closeani=popup.data('closeani'),
			popup_openani=popup.data('openani');
			popup.removeClass(popup_openani).addClass(popup_closeani);
		}
	});
	//open按钮事件
	$('.popupbtn').on('click',function(event){
		//阻止冒泡
		event.stopPropagation();
		var popup=$('.popup'),
		popup_openani=popup.data('openani'),
		popup_closeani=popup.data('closeani'),
		btn=$(this),
		btnani=btn.data('btnani');
		popup.removeClass(popup_openani).removeClass(popup_closeani);
		btn.removeClass(btnani);
		setTimeout(function(){
			popup.addClass(popup_openani);
			btn.addClass(btnani);
		});
	});
	

	//url正则表达式
	var strUrl= "^((https|http|ftp|rtsp|mms)?://)" +
	"?(([0-9a-z_!~*'().&=+$%-]+: )?[0-9a-z_!~*'().&=+$%-]+@)?"+
	"(([0-9]{1,3}\.){3}[0-9]{1,3}"+
	"|"+
	"([0-9a-z_!~*'()-]+\.)*"+
	"([0-9a-z][0-9a-z-]{0,61})?[0-9a-z]\."+
	"[a-z]{2,6})"+
	"(:[0-9]{1,4})?"+
	"((/?)|"+
	"(/[0-9a-z_!~*'().;?:@&=+$,%#-]+)+/?)$";
	var urlDemo = new RegExp(strUrl);

	//send按钮事件
	$('.sendbtn').on('click',function(event){
		btn=$(this),
		btnani=btn.data('btnani'),
		urlinput=$(".url-area"),
		datainput=$(".data-area"),
		outerdata=$('.outer-area');
		outerdata.html('');
		btn.removeClass(btnani);
		setTimeout(function(){
			btn.addClass(btnani);
		});
		//如果输入的url格式正确
		if (urlDemo.test(urlinput.val())) {
			$.ajax({
				url:urlinput.val(),
				type:'POST',
				data:{params: JSON.stringify(datainput.val())},
				dataType:'json',
				success:function(re){
					console.log(re);
					outerdata.html(JSON.stringify(re));
				},
				error:function(re){
					console.log("失败");
				}
			})
		}
	});

	//弹出框的关闭按钮事件
	$('.close').on('click',function(event){
		//阻止冒泡
		event.stopPropagation();
		var popup=$('.popup'),
		popup_closeani=popup.data('closeani'),
		popup_openani=popup.data('openani');
		popup.removeClass(popup_openani).addClass(popup_closeani);
		
	});
	
</script>